<template>
  <div class="firstCategory">
    <el-button type="primary" style='margin-bottom:20px' @click="addCategoryFormVisible=true">添加分类</el-button>
    <el-table ref="multipleTable" :border="true" :data="firstCategoryData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="分类的编号" width="200">
      </el-table-column>
      <el-table-column prop="categoryName" label="分类名称">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分类对话框 -->
    <el-dialog title="收货地址" :visible.sync="addCategoryFormVisible">
      <el-form :model="addCategoryForm" :rules="rules" ref='addFrom' label-width="100px">
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="addCategoryForm.categoryName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('addFrom')">取 消</el-button>
        <el-button type="primary" @click="addSubmit('addFrom')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑分类对话框 -->
    <el-dialog title="编辑分类" :visible.sync="editCategoryFormVisible">
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="分类id">
          <el-input v-model="editForm.id" :disabled='true'></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="editForm.categoryName" ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="editForm.value" style="width:100%" value='1' @change='isDeleteEvent'>
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCategoryFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getFristCategoryList, addFristCategory, editFristCategory } from '@/api/index'
export default {
  data () {
    return {
      editForm: {
        id: '',
        isDelete: 1,
        categoryName: '',
        value: ''
      },
      editCategoryFormVisible: false,
      firstCategoryData: [],
      addCategoryFormVisible: false,
      addCategoryForm: {
        categoryName: ''
      },
      rules: {
        categoryName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    editSubmit () {
      editFristCategory(this.editForm).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.init()
        this.editCategoryFormVisible = false
      })
    },
    isDeleteEvent (val) {
      console.log(val)
      this.isDelete = val
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.addCategoryFormVisible = false
    },
    handleEdit (row) {
      this.editCategoryFormVisible = true
      this.editForm.id = row.id
      this.editForm.categoryName = row.categoryName
      if (row.isDelete === 1) {
        this.editForm.value = '启用'
      } else if (row.isDelete === 0) {
        this.editForm.value = '禁用'
      }
    },
    addSubmit (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          addFristCategory({
            categoryName: this.addCategoryForm.categoryName
          }).then(res => {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.init()
            this.resetForm(formName)
          })
          this.addCategoryFormVisible = false
        } else {
          return false
        }
      })
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    init () {
      getFristCategoryList({ page: this.page, pageSize: this.pageSize }).then(
        res => {
          console.log(res)
          this.firstCategoryData = res.rows
        }
      )
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
</style>
